<!--test.vue-->
<template>
  <div :style="{ ...getTextStyle(props[0].fields) }" class="c-textarea">
    <!-- <span :style="{...getTextRetract(props[0].fields)}"></span> -->

    {{ dataTrigger }}
  </div>
</template>

<script>
// import componentRefresh from '@/mixins/componentRefresh'
import { ALIGNMENT } from '../../../common/js/vars'
export default {
  name: 'CText',
  props: {
    props: {
      type: Array,
      default: function() {
        return [
          {
            fields: []
          }
        ]
      }
    }
  },
  computed: {
    dataTrigger() {
      // if (this.props[1].fields[0].value.dataJson.json) {
      // return this.getResult(this.props[1].fields[0].value.dataJson.json)
      // } else {
      return this.props[1].fields[0].value.value
      // }
    }
  },
  // mixins: [componentRefresh],
  mounted() {},
  methods: {
    getTextStyle(item) {
      const lineHeight = item[3].value[0].value.value
      const alignment = item[3].value[1].value.value
      const fontSize = item[3].value[2].value.value
      const fontColor = item[3].value[3].value.value
      const fontFamily = item[3].value[4].value.value
      return {
        'line-height': lineHeight + 'px',
        'text-align': ALIGNMENT[alignment],
        'font-size': fontSize + 'px',
        'font-weight': 600,
        'font-family': fontFamily,
        color: fontColor
      }
    },
    getTextRetract(item) {
      // let retract = item[3].value[4].value.value
      // return {
      // 	width: retract + 'px',
      // 	display: 'inline-block',
      // }
    },
    getResult(json) {
      let jsonArray = []
      try {
        jsonArray = JSON.parse(json)
      } catch (e) {
        console.warn(e.message)
      }
      const model = this.props[1].fields[0].value.dataJson.model
      const field = model[0].field
      const mapping = model[0].mapping
      const key = mapping || field
      return jsonArray.length > 0 ? jsonArray[0][key] : ''
    }
  }
}
</script>

<style lang="stylus" scoped>
.c-textarea {
	word-break: break-all;
	white-space: normal;
}
</style>
